<template>
	<view class="m-pop" id="popAll"
		:style="{pointerEvents:(show&&maskCloseAble)?'fill':'none','background-color':bgColor}" @click="handlePopClick">
		<!-- ,bottom:show?'0rpx':-popHeigh-70+'rpx' -->
		<view class="bg-box" :class="{'backdrop':isBackDrop&&show,'showAni':show}">

		</view>
		<view class="content" @click.stop
			:style="{height:popHeigh+'rpx',transform:show?'translateY(0%)':'translateY(100%)'}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			storyId: {
				type: String,
				default: ""
			},
			popHeigh: {
				type: [Number, String],
				default: 600
			},
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			maskBgColor: {
				type: String,
				default: "transparent"
			},
			isBackDrop: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			bgColor() {
				if (this.show) {
					return this.maskBgColor
				} else {
					return "transparent"
				}
			}
		},
		data() {
			return {
				show: false,
			}
		},
		watch: {
			// show: {
			// 	handler(newVal, oldVal) {
			// 		if (newVal) {
			// 			this.$emit("show")
			// 		} else {
			// 			this.$emit("close")
			// 		}
			// 	},
			// 	deep: true,
			// 	immediate: true
			// }
		},
		methods: {
			handlePopClick(e) {
				// console.log("当前id是", e.target.id);
				// e.target.id == "popAll" &&
				if (this.maskCloseAble) {
					this.show = false
					this.$emit("close", "real")
				}
			},
			open() {
				this.show = true
				this.$emit("open")
			},
			close() {
				this.show = false
				this.$emit("close", "virtual")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-pop {
		pointer-events: fill;
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		z-index: 999999999999;

		.bg-box {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0rpx;
			top: 0rpx;
			z-index: -1;
			pointer-events: none;

		}

		.content {
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			transform: translateY(100%);
			width: 100vw;
			box-sizing: border-box;
			background-color: transparent;
			// transition: bottom 0.3s;
			transition: transform 0.3s;
			pointer-events: fill;
			box-sizing: border-box;
		}
	}

	.backdrop {
		backdrop-filter: blur(30rpx);
	}

	.showAni {
		animation: setpShowAni 0.5s linear forwards;

		@keyframes setpShowAni {
			0% {
				opacity: 0.5;
			}

			100% {
				opacity: 1;
			}

		}
	}
</style>